@import "../../css/mixins";

.heroBanner {
  padding: 10rem 0 11rem;
  text-align: left;
  position: relative;
  overflow: hidden;
  background: #000;
  color: #fff;
  margin-bottom: 4rem;
  padding-left: 2rem;
  padding-right: 2rem;

  @include small-size {
    padding: 4rem 2rem;
  }
}

.title {
  font-size: 4rem;
  text-shadow: 3px 0px 30px rgba(0, 0, 0, 0.2);

  @include small-size {
    font-size: 2rem;
  }
}

.subtitle {
  margin: 0;

  @include small-size {
    font-size: 1.2rem;
  }
}

.highlighted {
  background: linear-gradient(to left, #609CFF 0%, #7264F9 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
